<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="./移动端.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Font Awesome图标库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入 Chart.js 库 -->
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        /* 设置字体 */
        margin: 0;
        /* 去除默认边距 */
        padding: 0;
        /* 去除默认内边距 */
    }

    .container {
        width: 100%;
        max-width: 800px;
        /* 设置最大宽度 */
        margin: 0 auto;
        /* 水平居中 */
        padding: 20px;
    }

    .location {
        text-align: center;
        margin-bottom: 20px;
    }

    .location p {
        font-weight: bold;
        /* 加粗 */
        display: inline;
        /* 将文字变为行内元素 */
    }

    .location i {
        margin-right: 5px;
        vertical-align: middle;
        /* 垂直居中对齐 */
    }

    .weather-info {
        text-align: center;
    }

    .weather-info p {
        margin: 20px 0;
        /* 修改上下间距为 20px */
    }

    .big-temp {
        font-size: 100px;
        /* 设置温度大小 */
        font-weight: normal;
        /* 字体正常 */
    }

    .high-temperature {
        padding: 2px 5px;
        /* 添加一些内边距 */
        border-radius: 5px;
        /* 添加圆角 */
    }

    .wind-speed,
    .humidity,
    .pressure {
        font-weight: bold;
        /* 设置字体加粗 */
        color: gray;
        /* 设置字体颜色为灰色 */
    }

    #rainfall {
        font-style: italic;
        /* 设置字体样式为斜体 */
    }

    .indicator {
        margin-left: 5px;
        /* 添加一些左边距 */
    }

    .today-info {
        text-align: left;
        /* 左对齐 */
    }

    .today-temp {
        font-weight: bold;
        /* 设置字体加粗 */
    }

    .severity {
        background-color: darkgoldenrod;
        /* 设置背景颜色为深黄色 */
        color: white;
        /* 设置文本颜色为白色 */
        padding: 2px 5px;
        /* 添加一些内边距 */
        border-radius: 5px;
        /* 添加圆角 */
    }

    #additional {
        float: left;
        /* 左浮动 */
        margin-top: 10px;
        /* 添加一些上边距 */
        vertical-align: middle;
        /* 垂直居中对齐 */
    }

    #weather-icon {
        float: left;
        /* 左浮动 */
        margin-left: 10px;
        /* 添加一些左边距 */
        margin-top: 10px;
        /* 添加一些上边距 */
        vertical-align: middle;
        /* 垂直居中对齐 */
    }

    #weather-icon i {
        font-size: 24px;
        /* 设置图标大小 */
    }

    /* 其他样式保持不变 */

    .forecast {
        margin-top: 20px;
        /* 上边距 */
        text-align: left;
        /* 文本左对齐 */
    }

    .forecast #additional,
    .forecast #weather-icon {
        display: inline-block;
        /* 将元素放置在同一行 */
        vertical-align: middle;
        /* 垂直居中对齐 */
        margin-right: 10px;
        /* 右边距 */
    }

    .bottom-forecast {
        text-align: left;
        /* 文本左对齐 */
        margin-top: 20px;
        /* 上边距 */
    }

    .centered-image {
        max-width: 100%;
        max-height: 400px;
    }

    .save-button {
        background-color: #3498db;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }

    .save-button:hover {
        background-color: #2980b9;
    }

    .resizable-image {
        max-width: 90%;
        /* 可以根据需要调整图片的最大宽度 */
        max-height: 50vh;
        /* 可以根据需要调整图片的最大高度 */
    }

    .lifestyle-indices {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        /* 生活指数和图片之间的间距 */
    }

    .lifestyle-index {
        width: 25%;
        /* 一排显示4个，所以宽度设置为25% */
        text-align: center;
        margin-bottom: 20px;
        /* 生活指数之间的间距 */
    }

    .container {
        text-align: center;
    }

    .icon {
        width: 40px;
        height: 40px;
        margin: 0 10px;
        cursor: pointer;
    }

    .feedback-form,
    .contact-info,
    .privacy-policy {
        display: none;
    }
</style>

<body>
    <div class="container">
        <div class="location">
            <i class="fas fa-map-marker-alt"></i>
            <p id="location"><b>荥阳市 索河路</b></p>
        </div>
        <div class="weather-info">
            <p id="temperature"><i class="fas fa-thermometer-half"></i> <span class="big-temp">28</span>°C</p>
            <p id="description">阴 | <span class="high-temperature">139<span class="severity">中度</span></span></p>
            <p id="rainfall" class="rainfall">未来两小时不会降雨 <span class="indicator">&gt;</span></p>
            <p id="today" class="today-info">今天 <span class="severity">中度</span> <span class="today-temp">28°/15°</span>
            </p>
        </div>
        <div class="forecast">
            <div id="additional">多云</div>
            <div id="weather-icon"><i class="fas fa-cloud"></i></div>
        </div>
        <div class="bottom-forecast">
            <h2>24小时预报</h2>
            <!-- 这里添加24小时预报的内容 -->
        </div>
        <hr> <!-- 分割线 -->
    </div>
    <canvas id="weather-chart" width="400" height="200"></canvas> <!-- 天气折线图 -->
    <div class="container">
        <!-- 这里是你现有的 HTML 结构 -->
        <div class="bottom-forecast">
            <h2>15天预报</h2> <!-- 15天预报标题 -->
            <hr> <!-- 分界线 -->
        </div>

        <body>
            <img src="./3cdbfbe44669ef17a35fdd117914761.png" alt="Your Image" class="centered-image">
            <br>
            <button id="save-button" class="save-button">保存15天预报为图片</button>
            <br>
            <img src="./1f448ec7a26dc39747c856b31e8bf6f.png" alt="Your Image" class="resizable-image">
            <div class="lifestyle-indices">
                <div class="lifestyle-index">
                    <img src="./_日历.png" alt="" class="index-icon" onclick="changeIcon(this)">
                    <p>四月初四</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./行业大事-copy.png" alt="Cloud" class="index-icon" onclick="changeIcon(this)">
                    <p>尾号限行</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./胶囊1.png" alt="Umbrella" class="index-icon" onclick="changeIcon(this)">
                    <p>感冒</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./洗车.png" alt="Snowflake" class="index-icon" onclick="changeIcon(this)">
                    <p>洗车</p>
                </div>
                <!-- 添加更多生活指数 -->
                <div class="lifestyle-index">
                    <img src="./穿衣.png" alt="Wind" class="index-icon" onclick="changeIcon(this)">
                    <p>穿衣</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./紫外线.png" alt="Thermometer" class="index-icon" onclick="changeIcon(this)">
                    <p>紫外线强</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./运动.png" alt="Tint" class="index-icon" onclick="changeIcon(this)">
                    <p>不适宜运动</p>
                </div>
                <div class="lifestyle-index">
                    <img src="./钓鱼指数.png" alt="Temperature" class="index-icon" onclick="changeIcon(this)">
                    <p>适宜钓鱼</p>
                </div>
            </div>
            <!-- 意见反馈图标 -->
            <img src="./意见反馈.png" alt="意见反馈" class="icon" onclick="showFeedbackForm()">
            <!-- 联系我们图标 -->
            <img src="./联系我们.png" alt="联系我们" class="icon" onclick="showContactInfo()">
            <!-- 隐私协议图标 -->
            <img src="./隐私协议 1.png" alt="隐私协议" class="icon" onclick="showPrivacyPolicy()">
            <p>400-880-0599 (工作日9-18点)</p>
            <p>010-84798388转8042(工作日10-18点)</p>
        </body>

        <script src="app.js"></script>
        <script>
            // 获取天气折线图的 Canvas 元素
            var ctx = document.getElementById('weather-chart').getContext('2d');

            // 配置天气数据
            var weatherData = {
                labels: ['现在', '20:00', '22:00', '明天', '02:00', '04:00'],
                datasets: [{
                    label: '天气',
                    data: [20, 18, 17, 16, 15, 14], // 这里是温度数据，可以根据实际情况进行替换
                    backgroundColor: 'rgba(255, 99, 132, 0.2)', // 折线下方的填充颜色
                    borderColor: 'rgba(255, 99, 132, 1)', // 折线的颜色
                    borderWidth: 1
                }]
            };

            // 配置图表选项
            var chartOptions = {
                scales: {
                    y: {
                        beginAtZero: false
                    }
                }
            };
            // 创建天气折线图
            var weatherChart = new Chart(ctx, {
                type: 'line',
                data: weatherData,
                options: chartOptions
            });
        </script>
</body>

</html>